<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一朵 -- 购物车</title>
  <!-- swiper-2.7css -->
    <link rel="stylesheet" href="__STATIC__/index/js/swiper/idangerous.swiper.css">
  <!-- swiper-2.7js -->
    <script src="__STATIC__/index/js/swiper/idangerous.swiper.min.js"></script>
  <!-- jquery-3.2.1引用 -->
    <script src="__STATIC__/index/js/global/jquery-3.2.1.min.js"></script>
  <!-- 阿里巴巴矢量图库 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_561814_qyaihbkw7dx3whfr.css">
  <!-- 公共头部 脚部 -->
    <link rel="stylesheet" href="__STATIC__/index/css/global/global.css">
  <!-- 超过1200屏幕 -->
    <link rel="stylesheet" media="screen and (min-width: 1200px)" href="__STATIC__/index/css/car/car1200.css" />
  <!-- 1080-1200 -->
    <link rel="stylesheet" media="screen  and (min-width: 1080px) and (max-width: 1199px) " href="__STATIC__/index/css/car/car1080.css"
    />
  <!-- 960-1080 -->
    <link rel="stylesheet" media="screen  and (min-width: 960px) and (max-width: 1079px) " href="__STATIC__/index/css/car/car960.css"
    />
  <!-- 768-959 -->
    <link rel="stylesheet" media="screen  and (min-width: 768px) and (max-width: 959px) " href="__STATIC__/index/css/car/car768.css"
    />
  <!-- 568-767 -->
    <link rel="stylesheet" media="screen  and (min-width: 568px) and (max-width: 767px) " href="__STATIC__/index/css/car/car568.css"
    />
  <!-- 375-567 -->
    <link rel="stylesheet" media="screen  and (min-width: 375px) and (max-width: 567px) " href="__STATIC__/index/css/car/car375.css"
    />
  <!--引入layer-->
    <script src="__STATIC__/layer/layer.js" ></script>
  <!-- 小于375-->
    <link rel="stylesheet" media="screen  and (max-width: 374px) " href="__STATIC__/index/css/car/car320.css" />
</head>
<body>
    <form action="{:url('MyCart/pre_create_order')}" method="post" id="form1">
        <div class="M">
            <div class="m-header">
                <div>

                    <span onclick="go_back();">
                        <span class="iconfont icon-xiangzuo"></span>
                        返回
                    </span>
                    <span>购物车</span>
                    <span>
                        {if condition="!empty($realname)"}
                            <a href="{:url('User/index')}" class="my">
                                {$realname}
                            </a>
                        {else /}
                            <a href="{:url('Login/loginin')}">登录</a>
                            <a href="{:url('Register/register')}">注册</a>
                        {/if}
                        <a href="{:url('MyCart/my_cart')}" class="car">
                            <span class="iconfont icon-gouwuche"></span>
                            <span>{$cart_num}</span>
                        </a>
                    </span>
                </div>
            </div>
            <div class="m-goods">
                {if condition="!empty($goods)"}
                    {foreach name="goods" item="v"}
                    <div class="m-goods-content" id="m_{$v.spec_id}">
                        <div>
                            <span>
                                <label for="opt_{$v.spec_id}" class="xuanze label_{$v.spec_id} zhong" data-type="m" data-id="{$v.spec_id}">
                                   <input type="checkbox" id="opt_{$v.spec_id}"  onchange="selected(this);" value="{$v.spec_id}">
                                </label>
                            </span>
                        </div>
                        <div>
                            <img src="{$v.logo}" alt="">
                        </div>
                        <div>
                            <p>{$v.name}</p>
                            <p>{$v.title}</p>
                        </div>
                        <div>
                            <input type="button" class="min" value="—" {if condition="$v.num eq 1"}style="color: rgb(205, 205, 205);"{/if} data-id="{$v.spec_id}">
                            <input type="text" class="text_box text_box_{$v.spec_id}" value="{$v.num}" readonly="value">
                            <input type="button" class="add" value="+" data-id="{$v.spec_id}" >
                                                                                                                                      <!-- 库存 -->
                            <input type="hidden" class="kucun" value="{$v.stock}">
                                                                                                                                      <!-- 单价 -->
                            <input type="hidden" class="kucun" value="{if condition="$v.is_member eq 0"}{$v.price}{else /}{$v.member_price}{/if}">
                        </div>
                        <div class="m_total_amount_{$v.spec_id}">￥<span class="total_amount_{$v.spec_id}">{$v.total_price}</span></div>
                    </div>
                    {/foreach}
                {/if}
            </div>

            {if condition="empty($goods)"}
            <div class="m-kong">
                <img src="__STATIC__/index/img/car/car.png" alt="">
                <p>这里什么都没有</p>
                <p>······</p>
            </div>
            {/if}

            <div class="m-float">
                <div>
                    <span onclick="qk_cart()">
                        清空
                    </span>
                    <a href="javascript:;" onclick="return checkform();">结算</a>
                    <span>订单总额:
                        <span>￥<span class="final_amount">{$total_amount}</span></span>
                    </span>
                </div>
            </div>
        </div>
        <div class="PC">
            {include file="public/p_header" /}
            <div class="pc-headline">
                <p>
                    <span class="pc-gaoliang">
                        <span></span> 选择商品
                    </span>
                    <span>-------------</span>
                    <span>
                        <span></span>确认订单</span>
                    <span>-------------</span>
                    <span>
                        <span></span>付款</span>
                    <span>-------------</span>
                    <span>
                        <span></span>交易完成</span>
                </p>
            </div>
            <div class="pc-explain">
                <div>
                    <span>
                        <span>选择</span>
                        <span>商品</span>
                    </span>
                    <span>
                        <span>单价</span>
                        <span>数量</span>
                        <span>小计</span>
                        <span>操作</span>
                    </span>
                </div>
            </div>
            {if condition="!empty($goods)"}
            <div class="pc-shangpin">
                    {foreach name="goods" item="v"}
                        <div id="p_{$v.spec_id}">
                            <div>
                                <div>
                                    <label for="pc-opt_{$v.spec_id}" class="xuanze label_{$v.spec_id} pc_goods zhong"  data-type="pc" data-id="{$v.spec_id}">
                                        <input type="checkbox" name="ids[]" value="{$v.spec_id}" id="pc-opt_{$v.spec_id}" onchange="selected(this);">
                                    </label>
                                </div>
                                <div>
                                    <img src="{$v.logo}" alt="">
                                </div>
                                <div>
                                    <p>{$v.name}</p>
                                    <p>{$v.title}</p>
                                </div>
                            </div>
                            <div>
                                <div>
                                    ￥{if condition="$v.is_member eq 0"}{$v.price}{else /}{$v.member_price}{/if}
                                </div>
                                <div>
                                    <input type="button" class="min" value="—" {if condition="$v.num eq 1"}style="color: rgb(205, 205, 205);"{/if} data-id="{$v.spec_id}">
                                    <input type="text" class="text_box text_box_{$v.spec_id}" value="{$v.num}" readonly="value">
                                    <input type="button" class="add" value="+" data-id="{$v.spec_id}">
                                                                                                                                              <!-- 库存 -->
                                    <input type="hidden" class="kucun" value="{$v.stock}">
                                                                                                                                              <!-- 单价 -->
                                    <input type="hidden" class="kucun" value="{if condition="$v.is_member eq 0"}{$v.price}{else /}{$v.member_price}{/if}">
                                </div>
                                <div class="p_total_amount_{$v.spec_id}">
                                    ￥<span class="total_amount_{$v.spec_id}">{$v.total_price}</span>
                                </div>
                                <div onclick="cancel(this,{$v.spec_id});">
                                    <i class="iconfont icon-cuowu"></i>
                                </div>
                            </div>
                        </div>
                    {/foreach}
            </div>
            {/if}
            {if condition="empty($goods)"}
            <div class="pc-kong">
                <img src="__STATIC__/index/img/car/car.png" alt="">
                <p>这里什么都没有</p>
                <p>······</p>
            </div>
            {/if}
            <div class="pc-zonge">
                <div>
                    <span onclick="qk_cart()">清空</span>
                    <a href="javascript:;" onclick="checkform()">
                        结算
                    </a>
                    <span>订单总额（不含运费）：
                        <span>￥<span class="final_amount">{$total_amount}</span></span>
                    </span>
                    <span>共
                        <span class="all_num">{$total_num}</span>件商品</span>
                </div>
            </div>
            <div class="pc-goods-headline">
                推荐搭配
            </div>
            <div class="pc-goods">
                {foreach name="dp_goods" item="v"}
                    <a href="{:url('GoodsList/goods_detail')}?id={$v.id}">
                        <div class="pc-neirong-top">
                            <img src="{$v.logo}" alt="">
                        </div>
                        <div class="pc-neirong-bottom">
                            <p class="pc-headline-one">{$v.name}</p>
                            <p class="pc-zuanshi" {if condition="$v.member_level_id neq 4"} style="display: none;" {/if}>
                                <span>{$v.title} ￥{$v.member_price}</span>
                          </p>
                          <p class="pc-bojin" {if condition="$v.member_level_id neq 3"} style="display: none;" {/if}>
                                <span>{$v.title} ￥{$v.member_price}</span>
                          </p>
                          <p class="pc-huangjin" {if condition="$v.member_level_id neq 2"} style="display: none;" {/if}>
                                <span>{$v.title} ￥{$v.member_price}</span>
                          </p>
                          <p class="pc-wu" {if condition="$v.member_level_id neq 1"} style="display: none;" {/if}>
                                <span>普通会员 ￥{$v.price}</span>
                          </p>
                          <p class="pc-price">￥{$v.price} </p>
                        </div>
                    </a>
                {/foreach}
            </div>

            {include file="public/p_footer" /}
        </div>
        <input type="hidden" name="ids" value="">
    </form>
    <script>
        $(".add").click(function () {
            var ffinal_amount = parseFloat(0);         //选中的商品的价格
            var cash = 0;       //计算价格中间变量


            let kucun = $(this).next().val();
            let danjia = parseFloat($(this).next().next().val()).toFixed(2);
            let xianjia = $(this).parent().next();

            var t = $(this).parent().find('input[class*=text_box]');

            if (parseInt(t.val()) + 1 > kucun) {
                $(this).css("color", "#CDCDCD");
                layer.msg('购买数量已达库存上限',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
                return;
            }
            t.val(parseInt(t.val()) + 1);

//            xianjia.html(parseFloat(t.val() * danjia).toFixed(2));

            var spec_id = $(this).attr('data-id');
            $('.m_total_amount_'+spec_id).find('.total_amount_'+spec_id).text(parseFloat(parseInt(t.val()) * danjia).toFixed(2));
            $('.p_total_amount_'+spec_id).find('.total_amount_'+spec_id).text(parseFloat(parseInt(t.val()) * danjia).toFixed(2));
            if (parseInt(t.val()) > 1) {
                $(this).prev().prev().css("color", "#219dfd");
            }
            var x = parseInt(t.val());

            if(x<=kucun){
                //添加商品
                var id = $(this).attr('data-id');
                $.post("{:url('MyCart/increase_cart')}",
                    {id:id},
                    function(data){
//              console.log(data);
                        if(data.data.code == 1){
                            $(this).prev().val(x);
                            $('.p_total_amount_'+spec_id).prev().find('input[class*=text_box_'+spec_id+']').val(x);

                            $.each($('.pc_goods'),function(){
                                if($(this).hasClass('zhong')){
                                    var s_id= $(this).attr('data-id');
                                    var aaa = '.total_amount_'+s_id;
//                                    console.log(ffinal_amount);
//                                    console.log($(aaa).text());
                                    var cash = parseFloat(ffinal_amount)+parseFloat($(aaa).eq(1).text());
                                    ffinal_amount = cash;
//                                    console.log(typeof parseFloat(ffinal_amount));
//                                    console.log(typeof parseFloat($(aaa).text()));
//                                    console.log(ffinal_amount);
                                }
                            });
//                            return false;
                            $('.final_amount').text(parseFloat(ffinal_amount).toFixed(2));
//                        var goods_sum = parseInt($("#goods_sum_"+id).text());
//                        var price = parseFloat($("#price_"+id).text());
//                        goods_sum = goods_sum+1;
//                        var total_price = parseFloat(goods_sum*price);
//                        $("#goods_sum_"+id).text(goods_sum);
//                        $("#goods_price_"+id).text(total_price);
                        }else if(data.data.code == 0){
                            layer.msg(data.msg,{icon:2,time:1500,shade: 0.1}, function(index){
                                layer.close(index);
                                location.reload();
                            });
                            return false;
                        }else if(data.data.code == -1){            //商品已经下架，清空购物车该信息
                            layer.msg(data.msg,{icon:2,time:1500,shade: 0.1}, function(index){
                                layer.close(index);
                                location.reload();
                            });
                            return false;
                        }
                    }
                );
            }
            if (parseInt(t.val()) + 1 > kucun) {
                $(this).css("color", "#CDCDCD");
                return;
            }

        });

        $(".min").click(function () {
            var ffinal_amount =0.00;         //选中的商品的价格
            var cash = 0;       //计算价格中间变量


            let kucun = $(this).next().next().next().val();
            let danjia = parseFloat($(this).next().next().next().next().val()).toFixed(2);
            let xianjia = $(this).parent().next();
            var t = $(this).parent().find("input[class*=text_box]");
            if (parseInt(t.val()) - 1 < kucun) {
                $(this).next().next().css("color", "#219dfd");
            }
            var p = $(this).next().val();
            t.val(parseInt(t.val()) - 1);
//            xianjia.html('￥' + t.val() * danjia);       //价格
            var spec_id = $(this).attr('data-id');
//            $('.m_total_amount').html('￥'+t.val()*danjia);

            $('.m_total_amount_'+spec_id).find('.total_amount_'+spec_id).text(parseFloat(parseInt(t.val()) * danjia).toFixed(2));

            $('.p_total_amount_'+spec_id).find('.total_amount_'+spec_id).text(parseFloat(parseInt(t.val()) * danjia).toFixed(2));
//            console.log($('.p_total_amount_'+spec_id).find('.total_amount_'+spec_id).text());
//            $('.p_total_amount').html('￥'+t.val()*danjia);
            if (parseInt(t.val()) < 2) {
                t.val(1);
                var jiage = parseFloat(parseInt(t.val()) * danjia).toFixed(2);
//                xianjia.html('￥' + t.val() * danjia);
                $('.m_total_amount_'+spec_id).find('.total_amount_'+spec_id).text(jiage);
                $('.p_total_amount_'+spec_id).find('.total_amount_'+spec_id).text(jiage);
                $(this).css("color", "#CDCDCD");


//                $.each($('.pc_goods'),function(){
//                    if($(this).hasClass('zhong')){
//                        var s_id= $(this).attr('data-id');
//                        var t_amount = parseFloat($(this).parent().parent().parent().find('.total_amount_'+s_id).text());
//                        var final_amount = parseFloat(cash)+parseFloat(t_amount);
//                    }
//                });
//                $('.final_amount').text(final_amount);
            }



            var x = parseInt(t.val());
            //减少购物车商品数量
            var id = $(this).attr('data-id');
            if(p != 1){
                $.post("{:url('MyCart/reduce_cart')}",
                    {id:id},
                    function(data){
                        var goods_sum = parseInt($(this).next().val());

                        if(data.data.code == 1){
//                            $('.text_box').val(x);
                            $('.p_total_amount_'+spec_id).prev().find('input[class*=text_box_'+spec_id+']').val(x);
                            $('.m_total_amount_'+spec_id).prev().find('input[class*=text_box_'+spec_id+']').val(x);

                            $.each($('.pc_goods'),function(){
                                if($(this).hasClass('zhong')){
                                    var s_id= $(this).attr('data-id');
//                                    var t_amount = parseFloat($(this).parent().parent().parent().find('.total_amount_'+s_id).text());
                                    var aaa = '.total_amount_'+s_id;
                                    var cash = parseFloat(ffinal_amount)+parseFloat($(aaa).eq(1).text());
                                    ffinal_amount = cash;
                                }
                            });
                            $('.final_amount').text(parseFloat(ffinal_amount).toFixed(2));

                            if(goods_sum == 1){                       //删除商品
                                location.reload();
                            }
                        }else if(data.data.code == 0){        //购物车数量超出商品库存，自动恢复至商品最大库存数量
                            layer.msg(data.msg,{icon:2,time:1500,shade: 0.1}, function(index){
                                layer.close(index);
                                location.reload();
                            });
                            return false;
                        }else if(data.data.code == -1){       //该商品已经下架，将从购物车中移除该商品
                            layer.msg(data.msg,{icon:2,time:1500,shade: 0.1}, function(index){
                                layer.close(index);
                                location.reload();
                            });
                            return false;
                        }
                    }
                );
            }

        });

        // function a(obj) {
        //     console.log($(obj));
        //     if ($(obj).hasClass('zhong')) {
        //         $(obj).removeClass('zhong');
        //     } else {
        //         $(obj).addClass('zhong');
        //     }
        // }

        function selected (obj) {
//            e.preventDefault();
            var _this = $(obj).parent();
            var atr = _this.attr('data-type');          //判断选中的是PC端元素还是移动端元素
            var id = _this.attr('data-id');          //判断选中的是PC端元素还是移动端元素
            var pcWrap = $('.pc-shangpin');
            var mWrap = $('.m-goods-content');
            var spec_id = $(obj).val();
            var amount = parseFloat($(obj).parent().parent().parent().parent().find('.total_amount_'+spec_id).text());       //选中商品的总金额
            var final_amount = parseFloat($('.final_amount').eq(1).text());       //所有选中商品的总价
            var all_num = parseInt($('.all_num').text());

            console.log(final_amount);
//            console.log(amount);
            if(isNaN(all_num)){
                all_num = parseInt(0);
            }

//            console.log(all_num);
            if (_this.hasClass('zhong')) {          //取消选中
                pcWrap.find('.label_'+id).removeClass('zhong');
                mWrap.find('.label_'+id).removeClass('zhong');
//                console.log('1',mWrap.find('.label_'+id).removeClass('zhong'));
                var money = parseFloat(parseFloat(final_amount)*1-parseFloat(amount)*1);
//console.log(parseFloat(final_amount).toFixed(2));
//console.log(parseFloat(amount).toFixed(2));
//console.log(money);

                var num = parseInt(all_num-1);
                $('.final_amount').text(money);
                $('.all_num').text(num);
            } else {            //选中
                pcWrap.find('.label_'+id).addClass('zhong');
                mWrap.find('.label_'+id).addClass('zhong');
//                console.log(final_amount);
//                console.log(amount);
                var money = parseFloat(final_amount)+parseFloat(amount);
//                console.log(typeof amount);
                var num = parseInt(all_num+1);
                $('.final_amount').text(money);
                $('.all_num').text(num);
            }
        };
        /**
         * 删除购物车
         * @param obj
         * @param id    商品属性id
         */
        function cancel(obj,id){
            $.post("{:url('MyCart/del')}",
                {id:id},
                function(data){
//              console.log(data);
                    if(data.code == 1){
                        layer.msg('删除成功',{icon:1,time:1500,shade: 0.1}, function(index){
                            layer.close(index);
                            location.reload();
                        });
                        return false;
                    }else{
                        layer.msg(data.msg,{icon:2,time:1500,shade: 0.1}, function(index){
                            layer.close(index);
                            location.reload();
                        });
                        return false;
                    }
                }
            );
        }
        /**
         *  清空购物车
         */
        function qk_cart(){
            $.post("{:url('MyCart/qingkong')}",
                {id:1},
                function(data){
//              console.log(data);
                    if(data.code == 1){
                        layer.msg('清空成功',{icon:1,time:1500,shade: 0.1}, function(index){
                            layer.close(index);
                            window.location.reload();
                        });
                        return false;
                    }else{
                        layer.msg(data.msg,{icon:1,time:1500,shade: 0.1}, function(index){
                            layer.close(index);
                        });
                        return false;
                    }
                }
            );
        }
        /**
         * 检查订单
         * @returns {boolean}
         */
        function checkform(){
            var ids = '';
            if($(".zhong").length == 0){
                layer.msg('请选择需要购买的商品',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }
            $.each($('.pc_goods'),function(){
                if($(this).hasClass('zhong')){
                    var id = $(this).attr('data-id');       //商品的属性id
                    ids += id+',';
                }
            });
            $('input[name=ids]').val(ids);
            $.post("{:url('MyCart/check_cart')}",
                {ids:ids},
                function(data){
                    if(data.code == 0){
                        if(data.msg == -1){
                            layer.msg('您目前还没有登录，请先去登录',{icon:2,time:1500,shade: 0.1}, function(index){
                                layer.close(index);
//                                location.reload();
                                window.location.href = "{:url('Login/loginin')}";
                            });
                            return false;
                        }else{
                            layer.msg(data.msg,{icon:2,time:1500,shade: 0.1}, function(index){
                                layer.close(index);
                                location.reload();
                            });
                            return false;
                        }
                    }else{
                        $('#form1').submit();
//                  return true;
                    }
                }
            );
            return false;
        }


        //        function selectedMobile (obj) {
        //            var _this = $(obj);
        //            var id = _this.attr('data-id');
        //            var type = _this.attr('data-type');
        //            var otherWrap = $('.m-goods-content');
        //            if (_this.hasClass('zhong')) {
        //                console.log(1);
        //                _this.removeClass('zhong');
        //                otherWrap.find('.label_'+id).removeClass('zhong');
        //            } else {
        //                console.log(2)
        //                _this.addClass('zhong');
        //                otherWrap.find('.label_'+id).addClass('zhong');
        //            }
        //        }
        //
        //        function selectedPc (obj) {
        //            var _this = $(obj);
        //            var id = _this.attr('data-id');
        //            var type = _this.attr('data-type');
        //            var otherWrap = $('.m-goods-content');
        //            console.log(_this.attr('class'));
        //            if (_this.hasClass('zhong')) {
        //                console.log(1);
        //                _this.removeClass('zhong');
        ////                otherWrap.find('.label_'+id).removeClass('zhong');
        //            } else {
        //                console.log(2)
        //                _this.addClass('zhong');
        ////                otherWrap.find('.label_'+id).addClass('zhong');
        //            }
        //        }
    </script>
    <script>
        /**
         * 返回上一页
         */
        function go_back(){
            window.history.go(-1);  //返回上一页
        }
    </script>

</body>

</html>